<template>
  <div id="app">
    <!-- <Diagrams :setCurrent='timess' :setDir='setDir'></Diagrams> -->
    <div class='progre'>
      
      <Progress  class='ooo' :onProgress='onProgress' :progress='currentTime' :Max='Max' type='scroll' up down point width='600px' height='400px'>
        <template v-slot:down>
          <div class='down'  ref='down'></div>
        </template>
        <template v-slot:up>
          <div class='up' slot='up' ref='up'></div>
        </template>
        <template v-slot:point>
           <div class='point' slot='point'></div>
        </template>
      </Progress>
      <Progress class='top' :progress='currentTime' type='scroll' :point='false'></Progress>
      <Progress class='left' direction='vertical' :progress='currentTime' type='scroll' :point='false'></Progress>
      <Progress class='right' direction='vertical' :progress='currentTime' type='scroll' :point='false'></Progress>
      <Progress class='bottom' :progress='currentTime' type='scroll' :point='false'></Progress>

    </div>
    <simple class='ply' :setCurrent='timess' :setDir='setDir' :order='false' ></simple>
  </div>
</template>

<script>
import simple from '../test/simple'
import Progress from '@/views/Progress'
export default {
  data(){
    return {
      currentTime:null,
      Max : null,
      num: 1 
    }
  },
  components:{
    simple:simple,
    Progress:Progress,
  },
  methods:{
    timess( a ) {
      this.currentTime = a 
    },
    setDir( dur ) {
      this.Max = dur
    },
    onProgress( progress, max ) {
      if( progress >= max && this.num % 2 === 1) {
        this.num++
        this.$refs.down.style.background = 'url("/bk.jpg") 0% 0% / cover'
        this.$refs.up.style.background = 'url("/bk1.jpg") 0% 0% / cover'
      } else if(progress >= max){
        this.num++
        this.$refs.up.style.background = 'url("/bk.jpg") 0% 0% / cover'
        this.$refs.down.style.background = 'url("/bk1.jpg") 0% 0% / cover'
      }
    }
  },
}
</script>

<style>
* {
  margin:0;
  padding:0
}
html,body,#app {
  width:100%;
  height:100%;
  position: relative;
}
.up {
  background: url('/bk.jpg') no-repeat;
  background-size: cover;
}
.down {
  background: url('/bk1.jpg') no-repeat;
  background-size: cover;
  left:20px;
}
.progress-point-horizontal{
  background: rgb(54, 248, 255);
}
.ooo {
  position: absolute;
  left:50%;
  top:50%;
  transform:translateY(-50%) translateX(-50%);
  
}
.ply{
  position: absolute;
  top:-15px;

}
.progre {
  width:100%;
  height:100%;
  margin: auto;
  position: absolute;
  top:0;
  left:0;
}
.left {
  position: absolute;
  left:155px;
  top:0;
  font-size: 25px;
}
.right {
  position: absolute;
  right:155px;
  top:0;
  transform:rotate(180deg);
  font-size: 25px;

}
.top {
  position: absolute;
  right:0;
  top:130px;
  transform:rotate(180deg);
  font-size: 25px;
}
.bottom {
  position: absolute;
  right:0;
  bottom:130px;
  font-size: 25px;
}
</style>

